<template>
  <el-pagination
    v-model='page'
    :page-sizes='[10, 15, 20, 30]'
    :page-size='pageSize'
    layout='total, sizes, prev, pager, next'
    :total='total'
    @size-change='handleSizeChange'
    @current-change='handleCurrentChange'
  ></el-pagination>
</template>

<script>
import { ref, unref } from 'vue';
export default {
  name: 'page',
  prop: {
    // query: Function,
    total: Number
  },
  setup (props, { emit, attrs }) {
    const page = ref(1),
      pageSize = ref(10),
      total = ref(props.total || 0);

    // const query = props.query;

    const handleSizeChange = (val) => {
      pageSize.value = val;
      emit('query', { page: unref(page), pageSize: unref(pageSize) });
    }

    const handleCurrentChange = (val) => {
      page.value = val;
      emit('query', { page: unref(page), pageSize: unref(pageSize) });
    }

    return {
      page, pageSize, total, handleSizeChange, handleCurrentChange
    }
  }
}
</script>

<style>
</style>